<template>
  <div>
    <!-- <a-form-item ref="skuName" label="规格分类" prop="skuName">
      <a-input v-model="skuName"/>
    </a-form-item> -->
    <a-button class="editable-add-btn" @click="handleAdd">
      添加规格名称
    </a-button>
    
    <a-table :columns="columns" :data-source="spectList" bordered>
      <template
        v-for="(col) in fields"
        :slot="col"
        slot-scope="text, record, index"
      >
        <div :id="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.id, col)"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="() => save(record.id)">保存</a>
            <a-popconfirm title="是否确认取消该操作?" @confirm="() => cancel(record.id)">
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingid !== ''" @click="() => edit(record.id)">编辑</a>
          </span>
          <a-popconfirm title="是否确认删除该规格?" @confirm="confirmDelete(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
import pick from 'lodash.pick'
import { mapGetters,mapActions } from 'vuex'
const columns = [
  // {
  //   title: 'ID', 
  //   width: '100px',
  //   dataIndex: 'id',
  // },
  {
    title: '规格名称',
    key: 'name',
    dataIndex: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '库存',
    key: 'stock',
    dataIndex: 'stock',
    scopedSlots: { customRender: 'stock' },
  },
  {
    title: '起购数量',
    key: 'set_num',
    dataIndex: 'set_num',
    scopedSlots: { customRender: 'set_num' },
  },
  {
    title: '限购数量',
    key: 'quota',
    dataIndex: 'quota',
    scopedSlots: { customRender: 'quota' },
  },
  {
    title: '门市价',
    key: 'unified_price',
    dataIndex: 'unified_price',
    scopedSlots: { customRender: 'unified_price' },
  },
  {
    title: '批发价',
    key: 'trade_price',
    dataIndex: 'trade_price',
    scopedSlots: { customRender: 'trade_price' },
  },
  {
    title: '分销价',
    key: 'distribution_price',
    dataIndex: 'distribution_price',
    scopedSlots: { customRender: 'distribution_price' },
  },
  {
    title: '渠道价',
    key: 'channel_price',
    dataIndex: 'channel_price',
    scopedSlots: { customRender: 'channel_price' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width:'110px',
    scopedSlots: { customRender: 'operation' },
  },
];

const spectList = [{channel_price: "99.00",
color: "",
createtime: 1626343499,
distribution_price: "99.00",
id: 11111,
name: "中",
proudct_id: 5,
proudct_name: "足浴优惠券满200减30",
quota: 99,
set_num: 10,
specs: "",
stock: 11110,
trade_price: "99.00",
unified_price: "99.00"}];
// for (let i = 0; i < 3; i++) {
//   spectList.push({
//     id: i.toString(),
//     index: spectList.length,
//     name: ``,
//     stock: '',
//     set_num:'',//起订数量
//     quota:'',//限购
//     unified_price: '',//同一价
//     trade_price: '',//批发价
//     distribution_price: '',//分销价
//     channel_price: '',//渠道价
//   });
// }
// 表单字段
// const fields = ['id', 'name', 'sex', 'stu_id', 'idcard', 'area', 'address', 'politics', 'education', 'hobby', 'birthday', 'mobile']
const fields = ['index', 'name', 'stock','set_num','quota', 'unified_price', 'trade_price', 
'distribution_price','channel_price']

export default {
  props: {
    spectList: {
      type: Array,
      default: () => null
    }
  },
  components: {
  },
  data () {
    // this.cacheData = spectList.map(item => ({ ...item }));
    return {
      cacheData:[],
      columns,
      editingid: '',
      fields:fields,
      count:0,
      skuName:'',
      rules: {
        skuName: [
          { required: true, message: '请填写规格名', trigger: 'blur' },
          { min: 1, max: 30, message: '长度请填写1~30之间', trigger: 'blur' },
        ],
      },
    };
  },
  computed: {
     ...mapGetters(['proudct_id']),
   },
  created () {
    // this.spectList = this.spectList
    // this.$watch('spectList', () => {
    //   if (this.spectList && this.spectList.length > 0) {
    //     this.spectList = this.spectList
    //     this.$forceUpdate()
    //   }
    // })
  },
  mounted() {
  },
  methods: {
    ...mapActions(['SET_SPECTLIST']),
    handleAdd() {
      const { count } = this;
      const newData = {
        name: '',
        stock: '',
        set_num:'',//起订数量
        quota:'',//限购
        unified_price: '',//同一价
        trade_price: '',//批发价
        distribution_price: '',//分销价
        channel_price: '',//渠道价
        editable: true
      };
      let spectList = [...this.spectList, newData];
      this.SET_SPECTLIST(spectList)
    },
    handleChange(value, id, column) {
      const newData = [...this.spectList];
      const target = newData.filter(item => id === item.id)[0];
      if (target) {
        target[column] = value;
        let spectList = newData;
        this.SET_SPECTLIST(spectList)
      }
    },
    confirmDelete(id) {
      const params = {
        id
      }
      this.$productApi.SpecsDel(params).then(res=>{
        if(res.ret==200){
          this.$message.success('删除成功')
          this.bus.$emit('getSpecsPage')
        }
      })
    },
    edit(id) {
      const newData = [...this.spectList];
      const target = newData.filter(item => id === item.id)[0];
      this.editingid = id;
      if (target) {
        target.editable = true;
        let spectList = newData;
        this.SET_SPECTLIST(spectList)
      }
    },
    save(id) {
      let i = '';
      let newData = [...this.spectList];
      console.log('newData',newData)
      let newCacheData = [...this.cacheData];
      console.log('newCacheData',newCacheData)
      let target = newData.filter((item,index) => {
        if(id === item.id){
          i = index;
          return item;
        }
      })[0];
      console.log("target",target)
      let targetCache = newCacheData.filter(item => id === item.id)[0];
      let spectList = []
      if (target) {
        delete target.editable;
        target.editable = false;
        spectList = newData;
        console.log('spectList',spectList)
        this.SET_SPECTLIST(spectList)
        targetCache = target;
        this.cacheData = newCacheData;
      }
      this.editingid = '';
      console.log('i',i)
      console.log('spectList[i]',spectList[i])
      spectList[i].editable = false
      this.SET_SPECTLIST(spectList)
      this.$forceUpdate()
      target.proudct_id = this.proudct_id
      this.SpecsSave(target)
      
    },
    SpecsSave(params) {
      this.$productApi.SpecsSave(params).then(res=>{
        if(res.ret==200){
          this.$message.success('保存成功')
          this.SET_SPECTLIST(this.spectList)
        }
      })
    },
    cancel(id) {
      const newData = [...this.spectList];
      const target = newData.filter(item => id === item.id)[0];
      this.editingid = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => id === item.id)[0]);
        delete target.editable;
        let spectList = newData;
        this.SET_SPECTLIST(spectList)
      }
    },
  }
}
</script>
<style scoped>
.editable-add-btn{
  margin-bottom: 20px;
}
.editable-row-operations a {
  margin-right: 8px;
}
</style>
